<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html xmlns:th="" lang="zh-CN">
<%@include file="/WEB-INF/pages/base/include.jsp"%>
<body>
<div id="wrapper">
    <%@include file="/WEB-INF/pages/base/menu.jsp"%>
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h3 class="page-header">分类管理</h3>
            </div>
        </div>
        <div class="row">
            <form class="form-horizontal" data-parsley-validate>
                <div class="col-lg-12 col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">分类基本信息</div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-12 col-md-12">
                                    <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">分类名称：</label>
                                        <div class="col-lg-8">
                                            <input type="text" id="name" class="form-control" placeholder="请输入分类名称"
                                                   required>
                                        </div>
                                        <div class="col-lg-2 clo-md-2">
                                            <span class="help-block">*必须填写</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">分类描述：</label>
                                        <div class="col-lg-8">
                                            <input type="text" id="desc" class="form-control"
                                                   placeholder="请输入分类描述">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                         <label class="col-lg-2 clo-md-2 control-label">图片（尺寸：300x300）：</label>
                                         <div class="col-lg-8">
                                             <p><img id="image" src="" width="500px"></p>
                                             <button class="btn btn-default" id="photoUpload_1">上传图片</button>
                                         </div>
                                     </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">分类销售范围：</label>
                                        <div class="col-lg-8" id="mallList">
                                        	<c:forEach var="item" items="${mallList}" varStatus="status">
						                             <input type="checkbox" name="saleArea" value="${item.mallUuid}">${item.mallName}
						                    </c:forEach>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
                <button type="button" class="btn btn-primary" onclick="category_create()"
                        style="margin-left:15px;margin-bottom:30px;">发布
                </button>
                <button class="btn btn-default" id="cancel" style="margin-left:15px;margin-bottom:30px;">
                    取消
                </button>
            </form>
        </div>
    </div>
</div>
<script>
	var images = [],descs=[];
	var currentI = 0;
	
	(function(){
		var ajaxUpload = new AjaxUpload($('#photoUpload_1'), {
		    action: '${webPath}/file/uploadImage',
		    data: {
		        "json_package": JSON.stringify({
		            "head": {},
		            "body": {"file": "file"}
		        })
		    },
		    name: 'file',
		    onSubmit: function (file, ext) {
		        window.uploading = true;
		        $('#photoUpload_1').text('上传中...');
		        $('#photoUpload_1').attr('disabled', true);
		        this.disable();
		
		    },
		    onChange: function (file, extension) {
		        this.disable();
		    },
		    onComplete: function (file, response) {
		    	var data = JSON.parse(response);
		    	fileUrl = data.body.fileUrl;
		    	$("#image").attr('src',fileUrl); 
		        window.uploading = false;
		        $('#photoUpload_1').text('上传图片');
		        this.enable();
		    }
		});
	})();
	
	function category_create() {
		
		var type = "${type}";
		if(type == "3"){
			alert("当前账号无权限查看此功能");
			return;
		}
		
    	var baseURL = "${webPath}/category/create";
        var name = $('#name').val();
        var image = $("#image")[0].src;
        var desc = $('#desc').val();
        var mallList =[]; 
        $('input[name="saleArea"]:checked').each(function(){ 
        	mallList.push($(this).val()); 
        }); 
        var json_package = {
       		"head": {},
            "body": {
                "name": name,
                "image": image,
                "mallList": mallList,
                "desc": desc,
            }
        };
        $.post(baseURL, {"json_package": JSON.stringify(json_package)}, function (result) {
            if (typeof result == 'string') result = JSON.parse(result);
            if (result.body.result == '0') {
                alert(result.body.description)
                window.location.href="${webPath}toCategoryEdit/"+result.body.categoryId;
            } else {
            	alert(result.body.description)
            }
        })
    }
    $(function () {
        $('#cancel').click(function () {
            window.location.href = "${webPath}toCategory";
        })
    });
    $(document).ready(function (e) {
        $('#pro_info').keydown(function () {
            var len = $(this).val().length;
            if (len >= 100) {
                var num = $(this).val().substring(0, 99);
                $(this).val(num);
                alert("超过字数限制")
            }
        })
    });
    $(document).ready(function (e) {
        $('#pro_desc').keydown(function () {
            var len = $(this).val().length;
            if (len >= 140) {
                var num = $(this).val().substring(0, 139);
                $(this).val(num);
                alert("超过字数限制")
            }
        })
    });
</script>
</body>
</html>